<div style="padding:24px;" [@routeAnimation1]>
    <div nz-row [nzGutter]="24">
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="8" nzXs="24">
            <div style="height: 85px;color:#fff;padding: 8px 16px;background: #BA65C9">
                JS错误率
                <nz-tooltip [nzTitle]="'发生错误的次数/访问量'" [nzPlacement]="'top'">
                    <i nz-tooltip class="anticon anticon-question-circle"></i>
                </nz-tooltip>
            </div>
            <div
                style="height: 40px;border: solid 1px #eee;line-height: 40px;padding-left: 8px;color: gray;font-size: 12px;">
                <p *ngIf="compareRate.js>0">同比：{{compareRate.js*100+'%'||"--"}} <i style="color:green;" nz-icon type="arrow-up" theme="outline"></i>
                </p>
                <p *ngIf="compareRate.js==0">同比：0</p>
                <p *ngIf="compareRate.js<0">同比：{{compareRate.js*100+'%'||"--"}} <i style="color:green;" nz-icon type="arrow-down" theme="outline"></i>
                </p>
            </div>
        </div>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="8" nzXs="24">
            <div style="height: 85px;color:#fff;padding: 8px 16px;background:#00BCD6">
                访问速度
                <nz-tooltip [nzTitle]="'页面首次渲染时间'" [nzPlacement]="'top'">
                    <i nz-tooltip class="anticon anticon-question-circle"></i>
                </nz-tooltip>
            </div>
            <div
                style="height: 40px;border: solid 1px #eee;line-height: 40px;padding-left: 8px;color: gray;font-size: 12px;">
                <p *ngIf="compareRate.speed>0">同比：{{compareRate.speed+'ms'||"--"}} <i style="color:green;" nz-icon type="arrow-up" theme="outline"></i>
                </p>
                <p *ngIf="compareRate.speed==0">同比：0</p>
                <p *ngIf="compareRate.speed<0">同比：{{compareRate.js+'ms'||"--"}} <i style="color:green;" nz-icon type="arrow-down" theme="outline"></i>
                </p>
            </div>
        </div>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="8" nzXs="24">
            <div style="height: 85px;color:#fff;padding: 8px 16px;background:#FB9600">
                API请求成功率
                <nz-tooltip [nzTitle]="'接口调用成功次数/总调用量'" [nzPlacement]="'top'">
                    <i nz-tooltip class="anticon anticon-question-circle"></i>
                </nz-tooltip>
            </div>
            <div
                style="height: 40px;border: solid 1px #eee;line-height: 40px;padding-left: 8px;color: gray;font-size: 12px;">
                <p *ngIf="compareRate.api>0">同比：{{compareRate.api*100+'%'||"--"}} <i style="color:green;" nz-icon type="arrow-up" theme="outline"></i>
                </p>
                <p *ngIf="compareRate.api==0">同比：0</p>
                <p *ngIf="compareRate.api<0">同比：{{compareRate.api*100+'%'||"--"}} <i style="color:green;" nz-icon type="arrow-down" theme="outline"></i>
                </p>
            </div>
        </div>
    </div>
    <div nz-row [nzGutter]="24">
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="12" nzXs="24">
            <nz-spin [nzSpinning]="isSpinning.spin1">
                <nz-card style="height: 354px;" nzType="inner" nzTitle="PV/UV" [nzExtra]="extraPVTemplate">
                    <div class="total_pv_uv">
                        <p> 总PV:
                            <span>{{total_pv_uv?.totalPv||'--'}}</span>
                        </p>
                        <p> 总UV:
                            <span>{{total_pv_uv?.totalUv||'--'}}</span>
                        </p>
                    </div>
                    <app-custom-highchart [config]="pv_uv_config"></app-custom-highchart>
                </nz-card>
            </nz-spin>
            <ng-template #extraPVTemplate>
                <app-time-choice-panel (selectOver)="selectOver($event,10)"></app-time-choice-panel>
            </ng-template>
        </div>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="12" nzXs="24">
            <nz-spin [nzSpinning]="isSpinning.spin2">
                <nz-card class="my-list-card" nzType="inner" nzTitle="访问量TOP8页面" [nzExtra]="extraTOP10Template">
                    <nz-list style="height: 312px;overflow-y: auto;border: none;" [nzDataSource]="top10Data" nzBordered
                        nzSize="small" [nzRenderItem]="item">
                        <ng-template #item let-item>
                            <nz-list-item [nzActions]="[editAction]" [nzContent]="item.page">
                                <ng-template #editAction>{{item.count}}</ng-template>
                            </nz-list-item>
                        </ng-template>
                    </nz-list>
                </nz-card>
            </nz-spin>
            <ng-template #extraTOP10Template>
                <app-time-choice-panel (selectOver)="selectOver($event,20)"></app-time-choice-panel>
            </ng-template>
        </div>
    </div>

    <div nz-row>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" [nzSpan]="24">
            <nz-spin [nzSpinning]="isSpinning.spin3">
                <nz-card nzType="inner" nzTitle="地理分布" [nzExtra]="extradlTemplate">
                    <div nz-col nzSm="15" nzXs="24">
                        <app-custom-highchart [config]="dl_config"></app-custom-highchart>
                    </div>
                    <div nz-col nzSm="9" nzXs="24">
                        <nz-table #basicTable [nzData]="mapData" [nzPageSize]="7">
                            <thead>
                                <tr>
                                    <th>地域</th>
                                    <th>PV</th>
                                    <th>UV</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let data of basicTable.data">
                                    <td>{{data.name}}</td>
                                    <td>{{data.pv}}</td>
                                    <td>{{data.uv}}</td>
                                </tr>
                            </tbody>
                        </nz-table>
                    </div>
                </nz-card>
            </nz-spin>
            <ng-template #extradlTemplate>
                <app-time-choice-panel (selectOver)="selectOver($event,30)"></app-time-choice-panel>
            </ng-template>
        </div>
    </div>

    <div nz-row [nzGutter]="12">
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="8" nzXs="24">
            <nz-spin [nzSpinning]="isSpinning.spin4">
                <nz-card nzType="inner" nzTitle="浏览器PV占比" [nzExtra]="extrabsTemplate">
                    <app-custom-highchart [config]="bs_config"></app-custom-highchart>
                </nz-card>
            </nz-spin>
            <ng-template #extrabsTemplate>
                <app-time-choice-panel (selectOver)="selectOver($event,40)"></app-time-choice-panel>
            </ng-template>
        </div>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="8" nzXs="24">
            <nz-spin [nzSpinning]="isSpinning.spin5">
                <nz-card nzType="inner" nzTitle="操作系统PV占比" [nzExtra]="extraosTemplate">
                    <app-custom-highchart [config]="os_config"></app-custom-highchart>
                </nz-card>
            </nz-spin>
            <ng-template #extraosTemplate>
                <app-time-choice-panel (selectOver)="selectOver($event,50)"></app-time-choice-panel>
            </ng-template>
        </div>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" nzSm="8" nzXs="24">
            <nz-spin [nzSpinning]="isSpinning.spin6">
                <nz-card nzType="inner" nzTitle="分辨率PV占比" [nzExtra]="extrawhTemplate">
                    <app-custom-highchart [config]="wh_config"></app-custom-highchart>
                </nz-card>
            </nz-spin>
            <ng-template #extrawhTemplate>
                <app-time-choice-panel (selectOver)="selectOver($event,60)"></app-time-choice-panel>
            </ng-template>
        </div>
    </div>
</div>